<template>
	<view class="informationInfo">
		<navBar isBack background="#fff" backColor="#333"></navBar>
		<view class="content">
			<h2>{{info.title}}</h2>
			<view class="time">{{$utils.getFormatDate(info.create_time*1000,'yyyy-MM-dd hh:mm:ss')}} 浏览量{{info.view_num}}</view>
			<view class="imgbox" v-if="info.type==1">
				<image :src="info.media[0].path" mode=""></image>
			</view>
			<view class="imgbox" v-if="info.type==2">
				<video :src="info.media[0].path" controls></video>
			</view>
			<view class="cont">
				<!-- <rich-text :nodes="info.content | formatRichText"></rich-text> -->
				<u-parse :html="info.content"></u-parse>
			</view>
			
			<!-- 评论 -->
			<!-- <view class="list">
				<view class="commentTit" style="margin-bottom: 30rpx;">评论</view>
				<view class="item" v-for="(item1,index1) in askList" :key="index1" @click="replyOne(item1)">
					<image :src="item1.user_id.avatar.path" mode=""></image>
					<view class="ask">
						<view class="name">{{item1.user_id.username}}</view>
						<view class="info">{{item1.content}}<span>{{$utils.getDateDiff(item1.create_time*1000)}}</span></view>
						<view class="askList">
							<view class="item" v-for="(item2,index2) in item1.sub_reply" :key="index2" @click.stop="replyChild(item2)">
								<image :src="item2.user_id.avatar.path" mode=""></image>
								<view class="ask">
									<view class="name">{{item2.user_id.username}}</view>
									<view class="info">
										<view>回复<span>{{item2.reply_id.username}}</span>：{{item2.content}}<span>{{$utils.getDateDiff(item2.create_time*1000)}}</span></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			
		</view>
		
		<!-- 评论转发点赞 -->
		<!-- <view class="commentBox">
			<view class="inputBox">
				<input type="text" @confirm="sendReply" v-model="replyContent" placeholder-class="inputPlace" value="" :placeholder="replyText"/>
			</view>
			<view class="supperBox" @click="toSupport">
				<view class="p_fIcon" v-if="info.support_status == 1">
					<image src="/static/common/icon_collection.png"></image>
				</view>
				<view class="p_fIcon" v-else>
					<image src="/static/common/icon_collection2.png"></image>
				</view>
				<text>{{info.support_num}}</text>
			</view>
			<view class="supperBox" @click="is_show_model = true">
				<view class="p_fIcon iconfont icon-transpond"></view>
				<text>转发</text>
			</view>
		</view> -->
		
		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model ? 'show' : '']" @click.stop="is_show_model = false">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;" @click.stop="">
				<view class="md-content">
					<view class="md-content-item">
						<view class="s_bIcon iconfont icon-friend"></view>
						<view>分享给好友</view>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share" @click="is_show_model = false" class="sharebtn"></button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS-->
						<button @click="actionsheettip" class="sharebtn"></button>
						<!-- #endif -->
					</view>
					<view class="md-content-item" @click="popShareToPicture">
						<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
						<view>生成分享大图</view>
					</view>
				</view>
				<view class="cancel" @click="is_show_model = false">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import service_information from '@/service/infomation.js'
	export default{
		data(){
			return{
				info:{},
				
				askList:[],
				replyObj:{}, //回复对象
				replyText:'评论一下吧~', //评论框的placeholder
				replyContent:'', //回复的内容
				replyStatus:false, //回复还是自己评论，false评论，true回复
				information_id:'',
				
				is_show_model:false,
				forwardImg:'', //转发的图片
			}
		},
		onLoad(options){
			this.information_id = options.information_id
			this.getInfo()
		},
		
		filters: {
		  /**
		   * 处理富文本里的图片宽度自适应
		   * 1.去掉img标签里的style、width、height属性
		   * 2.img标签添加style属性：max-width:100%;height:auto
		   * 3.修改所有style里的width属性为max-width:100%
		   * 4.去掉<br/>标签
		   * @param html
		   * @returns {void|string|*}
		   */
		  formatRichText (html) { //控制小程序中图片大小
		   let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
			match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
			match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
			match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
			return match;
		   });
		   newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
			match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
			return match;
		   });
		   newContent = newContent.replace(/<br[^>]*\/>/gi, '');
		   newContent = newContent.replace(/\<img/gi, '< img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
		   return newContent;
		  } 
		 },
	 
		 onShareAppMessage(res) {
			let that = this;
			if (res.from === 'button') {
			}
			// that.getgetforwards();
			// return {
			// 	title: this.info.title,
			// 	path: '/pages_design/pages/design/dynamic/dynamic?trendId=' + this.trend_id + '&share_uid=' + this.userId + '&forward_id=' + this.forward_id,
			// 	success: function(res) {
					
			// 	}
			// };
			return new Promise((resolve, reject) => {
				service_information
					.toInformationForward({
						information_id: this.information_id
					})
					.then(res => {
						if (res.code == 1) {
							console.log(res.data.forward_id);
							resolve({
								title: this.info.title,
								path: '/pages_mall/pages/information/informationInfo?information_id=' + this.information_id + '&share_uid=' + this.userId + '&forward_id=' + res.data.forward_id,
								imageUrl: this.forwardImg
							});
						}
					});
			});
		 },
		methods:{
			getInfo(id){
				this.$api.getInformationInfo({information_id:this.information_id}).then(res=>{
					console.log(res,'资讯详情')
					if(res.code==1){
						this.info = res.data?res.data:{};
						this.forwardImg = res.data.type==1?res.data.media[0].path:res.data.type==2?res.data.media[0].cover:'';
					}
				})
			},
			
			
			// 点赞
			toSupport(){
				if(this.info.support_status==1){
					uni.showModal({
						content:'确定取消点赞吗？',
						success:res=>{
							if(res.confirm){
								this.toSupportFn()
							}
						}
					})
				}else{
					this.toSupportFn()
				}
			},
			
			// 点赞
			toSupportFn(){
				let params = {
					information_id:this.information_id,
					status:this.info.support_status==1?0:1
				}
				service_mall.informationSupport(params).then(res=>{
					console.log(res,'点赞')
					if(res.code==1){
						this.getInfo()
					}
				})
			},
			
			// 评论
			// 获取评论列表
			getCommentList(type){
				if(type=='onReach'){
					this.page++
				}else{
					this.page = 1
				}
				let params = {
					information_id:this.information_id,
					page:this.page,
					pagesize:this.pagesize
				}
				service_mall.getInformationCommentList(params).then(res=>{
					console.log(res,'资讯评论列表')
					if(res.code==1){
						if(type=='onReach'){
							this.askList = this.askList.concat(res.data)
						}else{
							this.askList = res.data?res.data:[]
						}
					}
				})
			},
			
			// 回复第一层
			replyOne(item){
				this.replyObj = item
				this.replyStatus = true
				console.log(item,'第一层')
				this.replyText = '回复：'+item.user_id.username
			},
			// 回复第二层
			replyChild(item){
				this.replyObj = item
				this.replyStatus = true
				console.log(item,'第二层')
				this.replyText = '回复：'+item.user_id.username
			},
			// 回复评论时键盘确定
			sendReply(){
				if(this.replyContent==''){
					uni.showToast({
						title:'请输入内容',
						icon:'none'
					})
				}else{
					// 自己评论
					if(!this.replyStatus){
						let params = {
							// user_id:this.$store.state.index.userId,
							information_id:this.information_id,
							content:this.replyContent
						}
						console.log(params,'自己评论的数据')
						service_mall.toInformationComment(params).then(res=>{
							console.log(res,'自己评论的结果')
							if(res.code==1){
								this.getCommentList()
								this.getInfo()
								this.replyContent = ''
								uni.showToast({
									title:'评论成功',
									icon:'success'
								})
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
						})
					}else{ //回复
						let params = {
							// user_id:this.$store.state.index.userId,
							comment_id:this.replyObj.id,
							content:this.replyContent
						}
						console.log(params,'回复的数据')
						service_mall.toInformationReply(params).then(res=>{
							console.log(res,'回复的结果')
							if(res.code==1){
								this.getCommentList()
								this.getInfo()
								this.replyContent = ''
								this.replyStatus = false
								this.replyText = '评论一下吧~'
								uni.showToast({
									title:'回复成功',
									icon:'success'
								})
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
						})
					}
				}
			},
			
			// 跳转-海报页面
			popShareToPicture() {
				uni.navigateTo({
					url: '/pagesFour/home/information/share?information_id=' + this.information_id
				});
			},
			
		}
	}
</script>

<style lang="scss">
	page{height: 100%;}
	.informationInfo{
		position: relative;
		height: 100%;
		background-color: #fff;
		.content{
			padding: 0 32rpx;
			background-color: #fff;
			// margin-bottom: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			h2{
				font: 600 44rpx/60rpx PingFang SC;
				color: #333333;
			}
			.time{
				font: 300 24rpx/24rpx PingFang SC;
				color: #6C6C6C;
				margin-top: 28rpx;
			}
			.imgbox{
				margin: 60rpx 0 0rpx 0;
				width: 686rpx;
				height: 458rpx;
				image{
					width: 100%;
					height: 100%;
				}
				video{
					width: 100%;
					height: 100%;
				}
			}
			.cont{
				margin-top: 40rpx;
				font: 400 32rpx/45rpx PingFang SC;
				color: #333333;
			}
			
			// 评论
			.list{
				margin-top: 80rpx;
				padding: 12rpx 0rpx;
				margin-bottom: 80rpx;
				background-color: #fff;
				.commentTit{
					font: 500 36rpx/36rpx PingFang SC;
					color: #000000;
				}
				.item{
					display: flex;
					image{
						width: 56rpx;
						height: 56rpx;
						flex-shrink: 0;
						border-radius: 50%;
						margin-right: 16rpx;
					}
					.ask{
						.name{
							display: flex;
							align-items: center;
							font: 400 20rpx/40rpx PingFang SC;
							color: #939393;
							span{
								 
								background-color: #F6F7FB;
								border-radius: 28rpx;
								padding: 0 12rpx;
								height: 28rpx;
								font: 400 20rpx/28rpx PingFang SC;
								color: #333;
								margin-left: 8rpx;
							}
						}
						.info{
							// display: flex;
							font: 400 24rpx/44rpx PingFang SC;
							color: #333;
							span{
								font: 400 20rpx/40rpx PingFang SC;
								color: #939393;
								margin-left: 16rpx;
							}
						}
					}
					.askList{
						display: flex;
						flex-direction: column;
						.item{margin-top: 16rpx;}
						display: flex;
						image{
							flex-shrink: 0;
							width: 48rpx;
							height: 48rpx;
							margin-right: 16rpx;
							border-radius: 50%;
						}
					}
				}
			}
		}
		
		// 评论转发点赞底部栏按钮
		.commentBox{
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			padding: 0 37rpx 0 32rpx;
			justify-content: space-between;
			width: 100%;
			height: 98rpx;
			background-color: #fff;
			box-shadow: 0px -5rpx 10rpx 0px rgba(155, 155, 155, 0.16);
			.inputBox{
				padding: 0 28rpx;
				width: 482rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background-color: #F6F7FB;
				input{
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					font: 500 24rpx/60rpx PingFang SC;
					color: #919191;
				}
				.inputPlace{
					font: 500 24rpx/60rpx PingFang SC;
					color: #919191;
				}
			}
			.supperBox{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				font: 500 20rpx/20rpx PingFang SC;
				color: #919191;
				.p_fIcon{
					width: 35rpx;
					height: 35rpx;
					image{
						width: 100%;
						height: 100%;
					}
					margin-bottom: 7rpx;
				}
				.iconfont{
					font-size: 35rpx;
					line-height: 35rpx;
					display: inline-block;
				}
			}
		}
		
		
		// 转发模态窗
		.cu-modal {
			position: fixed;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			top: 0;
			display: none;
			width: 100%;
			z-index: 500;
		}
		
		.show {
			display: block;
		}
		
		.bottom-md {
			// position: absolute;
			bottom: 0;
			background: #fff;
		}
		
		.share {
			position: fixed;
			color: #ffffff;
			right: 0;
			bottom: 190rpx;
			background: linear-gradient(to bottom right, #fe726b, #fe956b);
			padding: 10rpx 10rpx 10rpx 20rpx;
			border-top-left-radius: 50px;
			border-bottom-left-radius: 50px;
			box-shadow: 0 0 20upx rgba(0, 0, 0, 0.09);
		}
		
		.cancel {
			width: 100vw;
			padding: 30rpx;
			text-align: center;
			background: #ffffff;
			color: #888;
			font-weight: normal;
			font-size: 30rpx;
		}
		
		.md-content {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 50rpx 0;
		}
		
		.md-content-item {
			margin: 0 90rpx;
			position: relative;
		}
		
		.md-content-item image {
			width: 100rpx;
			height: 100rpx;
			margin: auto;
		}
		
		.md-content-item view {
			margin-top: 15rpx;
			font-size: 28rpx;
		}
		
		.sharebtn {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0;
		}
		
		.md-content-item .s_bIcon {
			font-size: 72rpx;
		}
		.s_bIcon {
			width: 112rpx;
			height: 112rpx;
			color: #fff;
			font-size: 140rpx;
			margin: 60rpx auto 0;
			border-radius: 50%;
			background: #8bc37a;
			box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.16);
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.s_bIcons {
			background: #ffd425;
		}
	}
</style>
